<template>
  <wakin-list-temp
    ref="temp"
    empty-mode="data"
    page-num-key="pageNum"
    page-size-key="pageSize"
    :page-start-num="1"
    :res-data-key="['rows']"
    :res-total-key="['total']"
    :res-code-key="['code']"
    :status-code="200"
    :empty-icon="$data.icon"
    :bottom-load-text="$data.loadText"
    :show-bottom-load-text="false"
    :custom-empty="false"
    :show-load-toast="$data.showLoadToast"
    @loadData="getDatas"
    @loadStatus="loadStatus"
  >
    <!--插槽:数据列表-->
    <template #render>
      <view class="list-box">
        <!--数据卡片-->
        <view
          class="list-item"
          v-for="(item, index) of $data.list"
          :key="index"
          :style="[{ height: item._btns.length > 0 ? '370rpx' : '250rpx' }]"
        >
          <view class="flex align-center">
            <view class="image">
              <image :src="item.imgUrl" />
            </view>
            <view class="content margin-left-sm">
              <view class="flex justify-between align-center">
                <view class="title u-line-1">
                  {{ item.merchantName }}
                </view>
                <view
                  class="margin-left text-nowarp flex- align-center-"
                  :style="[item._statusConfig.style]"
                  @tap.stop="backDetail(item)"
                >
                  {{ item.orderStatusName }}
                  <!-- <view
                    class="margin-left-xs examine"
                    v-if="item.reviewerOneContent"
                  >
                    <image :src="examineImage"></image>
                  </view> -->
                </view>
              </view>
              <view class="flex justify-between align-center margin-bottom-sm-">
                <view>
                  {{ item.createTime }}
                </view>
                <view v-if="item.distance">{{ item.distance }}km</view>
              </view>
              <!-- <view> 仅剩{{ item.enrollNumber }}份 </view> -->
              <!-- <view
                v-if="item.reviewerOneContent"
                class="text-red u-line-1 margin-bottom-xs"
                @tap.stop="backDetail(item)"
              >
                {{ item.reviewerOneContent }}
              </view> -->
              <view class="flex justify-between align-center">
                <view class="back">
                  实付满{{ item.activityActualPayment }}返{{
                    item.activityCashback
                  }}
                </view>
                <view class="flex align-center">
                  <!-- <view
                    class="margin-right-sm examine"
                    v-if="item.reviewerOneContent"
                    @tap.stop="backDetail(item)"
                  >
                    <image :src="examineImage"></image>
                  </view> -->
                  <view class="logo">
                    <image :src="item._shoplogo"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="card_foot" v-if="item._btns.length > 0">
            <view
              class="btn"
              v-for="(btn, btnIndex) of item._btns"
              :key="btnIndex"
              :style="[btn.style]"
              @tap="onBtn(item, btn)"
            >
              {{ btn.label }}
            </view>
          </view>
        </view>
      </view>
    </template>
    <!--插槽:自定义空提示-->
    <template #empty>
      <!-- <view class="empty" slot="empty"> -->
      <image :src="$data.icon"></image>
      <!-- </view> -->
    </template>
  </wakin-list-temp>
</template>

<script setup>
// 活动列表(首页)
import { getCurrentInstance, reactive, ref, toRef, toRefs } from "vue";
import { getOrderList as requestApi } from "@/api/Interface/order";
import BasicConfig from "@/utils/config";
import eleImage from "../../../static/images/elm.png";
import mtImage from "../../../static/images/mt.png";
import examineImage from "../../../static/images/examine.png";
import { shopEnum } from "../../../enums/shop";
import { orderStatusConfig } from "../../../enums/order";
import { cancelExamine } from "../../../api/Interface/business";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $emit = defineEmits(["total", "clickItem", "btn"]);
const temp = ref();
const loadShow = ref(false);
const $data = reactive({
  list: [],
  loadText: {
    loadmore: "轻轻上拉",
    loading: "努力加载中",
    nomore: "没有数据了",
  },
  showLoadToast: false, // 是否显示加载中toast
  listLoad: true, // 组件数据加载状态
  icon: $vm.$ListIcon.search,
  baseURL: BasicConfig.baseUrl,
  MainColor: BasicConfig.$MainColor,
});
/** 如果list中有需要格式化或操作的字段,则进行定制化操作 */
const getDatas = (e, total, source) => {
  loadShow.value = false;
  $data.list = [...e];
  $data.list.forEach((item) => {
    item._shoplogo = item.activityType == shopEnum["美团"] ? mtImage : eleImage;
    item._statusConfig = orderStatusConfig[item.orderStatus] || {};
    item._btns = item._statusConfig.getBtns?.() || [];
    // item.reviewerOneContent = "嗯嗯嗯";
    if (item.reviewerOneContent) {
      item._btns.push({
        key: "examine",
        label: "审核结果",
        value: "examine",
        style: {
          color: "#ffffff",
          border: "1px solid rgba(242, 50, 50, 0.2)",
          background: "#f53a3a",
          "border-radius": "15rpx",
          padding: "8rpx 16rpx",
          "font-size": "28rpx",
          "white-space": "nowrap",
        },
      });
    }
  });
  $emit("total", total);
};
/** 获取列表组件数据加载状态 */
const loadStatus = (e) => {
  $data.listLoad = e;
};
/** 连接列表通用子组件模版 */
const loadDatas = async (
  loadType = $vm.$ListLoadEnum.load,
  search,
  debounce = false,
  time = 1000
) => {
  loadShow.value = true;
  await temp.value.loadDatas({
    loadType,
    search,
    debounce,
    time,
    api: requestApi,
  });
};
/**
 * @description 返回item对象,组件类型key
 */
const details = (e) => {
  $emit("clickItem", e);
};

const onBtn = (item, btn) => {
  if (btn.key === "examine") {
    backDetail(item);
  } else {
    $emit("btn", item, btn);
  }
};
const backDetail = (item) => {
  if (!item.reviewerOneContent) return;
  uni.showModal({
    title: "审核结果",
    content: item.reviewerOneContent,
    showCancel: false,
    confirmText: "知道了",
  });
};
defineExpose({
  loadDatas,
});
</script>

<style lang="scss" scoped>
.list-item {
  padding: 20rpx;
  position: relative;
  background-color: #ffffff;
  margin-bottom: 30rpx;
  border-radius: 15rpx;
  font-size: 30rpx;
  color: #808080;
  .image {
    width: 210rpx;
    height: 210rpx;
    border-radius: 15rpx !important;
    image {
      width: 100%;
      height: 100%;
      border-radius: 15rpx !important;
    }
  }
  .content {
    width: calc(100% - 210rpx);
    height: 210rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 36rpx;
      color: #000000;
    }
    .back {
      border: 1px solid #e95b43;
      color: #f34628;
      border-radius: 15rpx;
      padding: 3rpx 10rpx;
    }
    .logo {
      width: 60rpx;
      height: 60rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .card_foot {
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    padding: 30rpx 0;
    margin-top: 30rpx;
    height: 120rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      &:not(:last-child) {
        margin-right: 20rpx;
      }
    }
  }
}
.examine {
  width: 56rpx;
  height: 56rpx;
  border-radius: 100%;
  background: #e95b43;
  border: 1px solid #f34628;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 45rpx;
    height: 40rpx;
  }
}
</style>
